<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
</head>
<body>
    <div id="app">
        <router-link to="/">首页</router-link>
        <router-link to="/video">视频</router-link>
        <router-link to="/music">音乐</router-link>
        <router-link to="/photo">美图</router-link>
        <router-link to="/mine">关于我</router-link>

        <!-- 5.设置一个路由展示容器  -->
        <router-view></router-view>
    </div> 

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../../lib/vue.js"></script>
    <script src="../../lib/vue-router.js"></script>
    <script>
        //1.先为路由页面创建组件
        const Home = {
            template:`<div>这是首页</div>`
        }    
        const Video = {
            template:`<div>这是视频</div>`
        }   
        const Music = {
            template:`<div>这是音乐</div>`
        }   
        const Photo = {
            template:`<div>这是美图</div>`
        }   
        const Mine = {
            template:`<div>这是关于我</div>`
        }   

        //2.创建路由表 (进行访问地址和组件的关联关系的表(映射))
        const routes = [
            {
                path:"/",
                component:Home
            },
            {
                path:"/video",
                component:Video
            },
            {
                path:"/music",
                component:Music
            },
            {
                path:"/photo",
                component:Photo
            },
            {
                path:"/mine",
                component:Mine
            }
        ];

        //3.创建vue 路由对象
        const router = new VueRouter({
            mode:"hash", //设置使用路由的模式 : hash(默认) / history / abstract (node.js环境中) 
            routes,// 配置当前路由实例的路由表
            fallback:true, //当浏览器不支持 history 模式控制路由是否应该回退到 hash 模式
            base:'/cart',// 添加路由基路径
            linkActiveClass:"active", //全局配置 <router-link> 默认的激活的 class  ,默认 :router-link-active
            linkExactActiveClass:'active2',//全局配置 <router-link> 默认的精确激活的 class
            // scrollBehavior  // 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样

        })

        //vm 就是根组件
        let vm = new Vue({
            el:"#app",//指定Vue挂载的DOM
            data:{//当前vue实例中使用的数据

            },
            router,// 4. 将vue路由对象挂载到对应的vue实例对象
            methods:{//当前Vue实例中使用到的方法

            }
        })

        console.log(router);
    </script>
</body>
</html>